<template>
	<div class="HomeSwiper">
		<div class="title">
			<img :src="info.titleIcon" />
			<h3>{{info.title}}</h3>
		</div>
		<swiper :options="swiperOption" class="swiper">
			<swiper-slide v-for="(items,index) of info.products" :key="index">
				<ul class="swiper-ul">
					<router-link 
						tag="li" 
						to="/Detail"
						class="swiper-item" 
						v-for="(item,index) of items" 
						:key="index">
						<div class="image">
							<img :src="item.proImg" />
						</div>
						<div class="price">
							<span class="new-price">{{item.newPrice | Fiexd | rmb}}</span>
							<span class="old-price">{{item.oldPrice | Fiexd | rmb}}</span>
						</div>
						<p class="text">{{item.proDec}}</p>
					</router-link>
					
				</ul>
			</swiper-slide>
			
		</swiper>	
	</div>
	
</template>

<script>
	export default{
		name:"HomeSwiper",
		props:["info"],
		data(){
			return {
				swiperOption:{}
			}
		},
		filters:{
			Fiexd(v){
				return parseInt(v).toFixed(2);
			},
			rmb(v){
				return "￥"+v
			}
		}
		
		
	}
</script>

<style lang="stylus" scoped>
.HomeSwiper{
	height: 564px;
	.title{
		height:95px;
		display: flex;
		align-items:center;
		img{
			width:29px;
			height: 38px;
			margin-left: 23px;
			margin-right:18px;
		}
		h3{
			font-size: 28.13px;
		}
	}
    .swiper{
			.swiper-ul{
				display: flex;
				justify-content:space-around;
				.swiper-item{
					width: 324px;
					height: 465px;
					border:2px solid #eee;
					.image{
						width:100%;
						height: 0;
						padding-bottom:108%;
						img{
							width: 100%;
						}
						
					}
					.price{
						height: 40px;
						display: flex;
						justify-content: space-around;
						align-items: center;
						.new-price{
							font-style: 28px;
							color: red;
						}
						.old-price{
							font-style: 24px;
							text-decoration:line-through;
						}
						
					}
					.text{
						font-size: 28px;
						color: #666666;
						margin: 0 30px;
						letter-spacing:3px;
						line-height: 39px;
					}
				}
			}
		
	}
}

</style>